<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="CYW">
    <title></title>
    <style>
      body{
          font-size: 14px;
          margin: 0;

      }
      div{
          margin: 100px auto;
          width: 150px;
          border:1px solid green;
      }
     p a{
       
         margin: 5px;
         text-decoration: none;
      }
      a:hover{  
          color: red;
      }
      p{  
          margin: 0 10px;
           padding-bottom: 10px ;
           padding-top: 10px; 
          border-bottom: 2px solid ;     
      }

      ul{
          margin: 0;
          padding: 0;
          list-style: none;
      }
      ul li {
          margin: 10px;
      }
   
      

    </style>
</head>
<body>
    <div>
        <p class="all"><input type="checkbox"><label>全选</label><a href="javascript:;">反选</a></p>
        <ul class="items">
            <li><input type="checkbox"><label>选项1</label></li>
			<li><input type="checkbox"><label>选项2</label></li>
			<li><input type="checkbox"><label>选项3</label></li>
			<li><input type="checkbox"><label>选项4</label></li>
			<li><input type="checkbox"><label>选项5</label></li>
			<li><input type="checkbox"><label>选项6</label></li>
			<li><input type="checkbox"><label>选项7</label></li>
			<li><input type="checkbox"><label>选项8</label></li>
			<li><input type="checkbox"><label>选项9</label></li>
			<li><input type="checkbox"><label>选项10</label></li>
        </ul>
    </div>
    

</body>
</html>
<script>
    window.onload = function(){

        var a=document.querySelector('a');
        var label=document.getElementsByTagName('label')[0];
        var all=document.querySelector('.all input');
        var inputs=document.querySelectorAll('.items input')

        all.onclick = function(){
        //  全选
            for(var i = 0;i < inputs.length; i++){
                inputs[i].checked =this.checked; 
            }
            isCheckAll();
        }
        // 反选 选中不是checked的按钮
        a.onclick = function(){
              for(var i= 0;i < inputs.length; i++){
                inputs[i].checked = !inputs[i].checked; 
            }
            isCheckAll();
        }
       
        // 实时的检测状态，检测全选是否需要勾选
        for(var i=0;i<inputs.length;i++){
             inputs[i].onclick =function(){

                 isCheckAll();
            }
        }
        // 记录inputs 选中的count个数
          
    var isCheckAll = function () {
		// count记录被选中的个数
		var count = 0;
		for (var i = 0; i < inputs.length; i++) {
			// inputs[i].checked && n++;
			// 当被选中时，让被选中的个数+1
			if (inputs[i].checked) {
				count ++;
			}
		}
		console.log(count);
        // 如果所有的input都被选中的情况下，那个全选按钮也要被选中
        all.checked = count==inputs.length;
        label.innerHTML = all.checked ? '全不选' : '全选' ;
    }


    }
    
</script>